<template>
  <view class="vehicle-management-page">
    <!-- 顶部统计 -->
    <view class="stats-section">
      <view class="stat-item">
        <text class="stat-number">{{ vehicleStats.total }}</text>
        <text class="stat-label">总车辆</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ vehicleStats.parking }}</text>
        <text class="stat-label">停车中</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ vehicleStats.available }}</text>
        <text class="stat-label">可用</text>
      </view>
    </view>

    <!-- 车辆列表 -->
    <view class="vehicle-list">
      <view 
        class="vehicle-item" 
        v-for="vehicle in vehicles" 
        :key="vehicle.id"
        @click="handleEditVehicle(vehicle)"
      >
        <view class="vehicle-info">
          <view class="plate-number">{{ vehicle.plateNumber }}</view>
          <view class="vehicle-details">
            <text class="vehicle-type">{{ vehicle.type }}</text>
            <text class="vehicle-brand">{{ vehicle.brand }}</text>
          </view>
          <view class="vehicle-status">
            <u-tag 
              :text="vehicle.statusText" 
              :type="vehicle.statusType"
              size="mini"
            />
          </view>
        </view>
        
        <view class="vehicle-actions">
          <u-button 
            size="mini" 
            type="primary" 
            @click.stop="handleViewDetails(vehicle)"
          >
            详情
          </u-button>
          <u-button 
            size="mini" 
            type="error" 
            @click.stop="handleDeleteVehicle(vehicle)"
          >
            删除
          </u-button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="vehicles.length === 0" class="empty-state">
      <u-empty 
        text="暂无车辆信息"
        mode="car"
      />
      <u-button 
        type="primary" 
        @click="handleAddVehicle"
        style="margin-top: 20px;"
      >
        添加车辆
      </u-button>
    </view>

    <!-- 添加车辆按钮 -->
    <view v-if="vehicles.length > 0" class="add-button-section">
      <u-button 
        type="primary" 
        @click="handleAddVehicle"
        icon="plus"
      >
        添加车辆
      </u-button>
    </view>

    <!-- 添加/编辑车辆弹窗 -->
    <u-popup v-model="showVehiclePopup" mode="center" :round="10">
      <view class="vehicle-popup">
        <view class="popup-header">
          <text class="popup-title">{{ isEdit ? '编辑车辆' : '添加车辆' }}</text>
        </view>
        
        <view class="popup-content">
          <view class="form-item">
            <text class="form-label">车牌号</text>
            <u-input 
              v-model="vehicleForm.plateNumber"
              placeholder="请输入车牌号"
              :border="true"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">车辆类型</text>
            <u-select 
              v-model="vehicleForm.type"
              :list="vehicleTypes"
              placeholder="请选择车辆类型"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">品牌型号</text>
            <u-input 
              v-model="vehicleForm.brand"
              placeholder="请输入品牌型号"
              :border="true"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">颜色</text>
            <u-input 
              v-model="vehicleForm.color"
              placeholder="请输入车辆颜色"
              :border="true"
            />
          </view>
        </view>
        
        <view class="popup-actions">
          <u-button @click="showVehiclePopup = false">取消</u-button>
          <u-button type="primary" @click="confirmVehicle">确认</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 弹窗控制
const showVehiclePopup = ref(false)
const isEdit = ref(false)

// 车辆表单
const vehicleForm = reactive({
  id: null,
  plateNumber: '',
  type: '',
  brand: '',
  color: ''
})

// 车辆类型选项
const vehicleTypes = [
  { label: '小型汽车', value: '小型汽车' },
  { label: '大型汽车', value: '大型汽车' },
  { label: '摩托车', value: '摩托车' },
  { label: '新能源车', value: '新能源车' }
]

// 车辆数据
const vehicles = ref([
  {
    id: 1,
    plateNumber: '京A12345',
    type: '小型汽车',
    brand: '大众帕萨特',
    color: '黑色',
    status: 'parking',
    statusText: '停车中',
    statusType: 'warning',
    location: 'A区-123号',
    entryTime: '2025-01-21 08:30'
  },
  {
    id: 2,
    plateNumber: '京B67890',
    type: '小型汽车',
    brand: '丰田凯美瑞',
    color: '白色',
    status: 'available',
    statusText: '可用',
    statusType: 'success'
  },
  {
    id: 3,
    plateNumber: '京C11111',
    type: '新能源车',
    brand: '特斯拉Model 3',
    color: '红色',
    status: 'parking',
    statusText: '停车中',
    statusType: 'warning',
    location: 'C区-456号',
    entryTime: '2025-01-21 19:00'
  }
])

// 计算属性
const vehicleStats = computed(() => {
  const total = vehicles.value.length
  const parking = vehicles.value.filter(v => v.status === 'parking').length
  const available = total - parking
  
  return { total, parking, available }
})

// 添加车辆
const handleAddVehicle = () => {
  isEdit.value = false
  resetVehicleForm()
  showVehiclePopup.value = true
}

// 编辑车辆
const handleEditVehicle = (vehicle) => {
  isEdit.value = true
  Object.assign(vehicleForm, vehicle)
  showVehiclePopup.value = true
}

// 查看车辆详情
const handleViewDetails = (vehicle) => {
  console.log('查看车辆详情:', vehicle)
  // 这里可以跳转到车辆详情页面
}

// 删除车辆
const handleDeleteVehicle = (vehicle) => {
  uni.showModal({
    title: '确认删除',
    content: `确定要删除车牌号为 ${vehicle.plateNumber} 的车辆吗？`,
    success: (res) => {
      if (res.confirm) {
        deleteVehicle(vehicle.id)
      }
    }
  })
}

// 删除车辆
const deleteVehicle = (vehicleId) => {
  const index = vehicles.value.findIndex(v => v.id === vehicleId)
  if (index > -1) {
    vehicles.value.splice(index, 1)
    uni.showToast({
      title: '删除成功',
      icon: 'success'
    })
  }
}

// 确认车辆操作
const confirmVehicle = () => {
  if (!vehicleForm.plateNumber) {
    uni.showToast({
      title: '请输入车牌号',
      icon: 'none'
    })
    return
  }

  if (!vehicleForm.type) {
    uni.showToast({
      title: '请选择车辆类型',
      icon: 'none'
    })
    return
  }

  if (isEdit.value) {
    // 编辑车辆
    const index = vehicles.value.findIndex(v => v.id === vehicleForm.id)
    if (index > -1) {
      Object.assign(vehicles.value[index], { ...vehicleForm })
    }
    uni.showToast({
      title: '编辑成功',
      icon: 'success'
    })
  } else {
    // 添加车辆
    const newVehicle = {
      id: Date.now(),
      ...vehicleForm,
      status: 'available',
      statusText: '可用',
      statusType: 'success'
    }
    vehicles.value.push(newVehicle)
    uni.showToast({
      title: '添加成功',
      icon: 'success'
    })
  }

  showVehiclePopup.value = false
  resetVehicleForm()
}

// 重置车辆表单
const resetVehicleForm = () => {
  Object.assign(vehicleForm, {
    id: null,
    plateNumber: '',
    type: '',
    brand: '',
    color: ''
  })
}

// 页面加载
onMounted(() => {
  loadVehicles()
})

// 加载车辆数据
const loadVehicles = async () => {
  try {
    console.log('加载车辆数据')
  } catch (error) {
    console.error('加载车辆数据失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.vehicle-management-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

.stats-section {
  display: flex;
  justify-content: space-around;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  .stat-item {
    text-align: center;
    
    .stat-number {
      display: block;
      font-size: 24px;
      font-weight: 600;
      color: #2d8cf0;
      margin-bottom: 4px;
    }
    
    .stat-label {
      font-size: 12px;
      color: #666;
    }
  }
}

.vehicle-list {
  .vehicle-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .vehicle-info {
      margin-bottom: 16px;
      
      .plate-number {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
      }
      
      .vehicle-details {
        display: flex;
        gap: 16px;
        margin-bottom: 8px;
        
        .vehicle-type,
        .vehicle-brand {
          font-size: 14px;
          color: #666;
        }
      }
      
      .vehicle-status {
        display: flex;
        justify-content: flex-end;
      }
    }
    
    .vehicle-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }
  }
}

.empty-state {
  padding: 60px 0;
  text-align: center;
}

.add-button-section {
  text-align: center;
  padding: 20px 0;
}

.vehicle-popup {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 320px;
  
  .popup-header {
    text-align: center;
    margin-bottom: 20px;
    
    .popup-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
  
  .popup-content {
    margin-bottom: 24px;
    
    .form-item {
      margin-bottom: 16px;
      
      .form-label {
        display: block;
        margin-bottom: 8px;
        color: #666;
        font-size: 14px;
      }
    }
  }
  
  .popup-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
}
</style>
